<template>
  <DetailMenu
    :menuList="menuList"
    curKeyValue="overview"
    @onClickMenuItem="onClickMenuItem"
  >
    <template v-slot:content_area>
      <div class="flex_between">
        <BreadcrumbGt :items="items" />
      </div>
      <component :is="componentName"></component>
    </template>
  </DetailMenu>
</template>
<script>
export default {
  name: "SystemDetail"
}
</script>
<script setup>
import { ref, reactive, onMounted, defineExpose } from "vue";
import DetailMenu from "@/components/System/DetailMenu";
import { useRoute, useRouter } from "vue-router";

const route = useRoute();
const router = useRouter();
const items = ref([{ label: "ebpf系统", path: "/containerSystemList" }]);
const systemName = route.query.name;
const menuList = reactive([
  { key: "overview", label: "概览" },
  { key: "topology", label: "调用拓扑" },
  { key: "k8s", label: "k8s资源" },
  { key: "node", label: "系统节点" },
]);

const curKey = ref("overview");
const componentName = ref(null);
onMounted(async () => {
  items.value.push(systemName);
  loadModule(curKey.value);
});

// 获取当前key
const onClickMenuItem = (key) => {
  curKey.value = key;
  router.replace({
    path: `/containerSystem/detail/${key}`,
    query: route.query,
  });
  loadModule(curKey.value);
};

//加载不同的模块
const loadModule = async (moduleName) => {
  // import 后面是文件路径
  console.log(`./${moduleName}/index.vue`, 'load path');

  const module = await import(`./${moduleName}/index.vue`);
  // console.log("module", module);
  componentName.value = module.default;
};

defineExpose({});
</script>
<style lang="scss" scoped>

</style>
